import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../config/config.dart';
import '../../../global/global_data.dart';
import '../../../views/add_record_Image_widget.dart';
import '../../../views/common_widget.dart';
import '../../../views/dialog_manager.dart';
import 'add_shower_logic.dart';

class AddShowerPage extends StatelessWidget {
  AddShowerPage({super.key});

  final AddShowerLogic logic = Get.find<AddShowerLogic>();

  final FocusNode _textFieldFocusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Config.colorBg,
      resizeToAvoidBottomInset: false,
      body: Stack(
        children: [
          Column(
            children: [
              CommonWidget.commonAppBar("记录洗澡"),
              Expanded(
                child: ListView(
                    padding: EdgeInsets.only(bottom: 220.w),
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    children: [
                      //菜单
                      Container(
                        width: double.infinity,
                        margin: EdgeInsets.only(top: 30.w, left: 35.w, right: 35.w),
                        padding: EdgeInsets.symmetric(horizontal: 35.w, vertical: 4.w),
                        decoration: BoxDecoration(
                          color: Config.colorBg2,
                          borderRadius: BorderRadius.circular(Config.roundBig.w),
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            menuItem("记录宠物", () {
                              _textFieldFocusNode.unfocus();
                              DialogManager.showBottomMenu(context, List.generate(global.pets.length, (index){
                                return global.pets[index]['name'];
                              }), global.currentPet.value, (index){
                                global.currentPet.value=index;
                              });
                            }, subTitle: "请选择"),
                            CommonWidget.commonDivider(),
                            menuItem("记录时间", () async {
                              _textFieldFocusNode.unfocus();
                              DialogManager.showBottomDatePop(context, (str){
                                EasyLoading.showToast('选择的时间=$str');
                              });
                            }, subTitle: "请选择"),
                            CommonWidget.commonDivider(),
                            Container(
                              margin: EdgeInsets.only(top: 30.w, left: 0.w, right: 0.w),
                              width: double.infinity,
                              child: Text(
                                '选择心情',
                                style: TextStyle(
                                    color: Config.colorText1, fontSize: Config.textSizeContent.sp),
                              ),
                            ),
                            SizedBox(
                              height: 30.w,
                            ),
                            Wrap(
                              spacing: 45.w,
                              runSpacing: 35.w,
                              children: List.generate(logic.emojiList.length, (index) {
                                return wrapItem(index);
                              }),
                            ),
                            SizedBox(
                              height: 30.w,
                            ),
                          ],
                        ),
                      ),
                      //描述
                      Container(
                        width: double.infinity,
                        margin: EdgeInsets.only(top: 30.w, left: 35.w, right: 35.w),
                        padding: EdgeInsets.symmetric(horizontal: 35.w, vertical: 35.w),
                        decoration: BoxDecoration(
                          color: Config.colorBg2,
                          borderRadius: BorderRadius.circular(Config.roundBig.w),
                        ),
                        child: Column(
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  '描述',
                                  style: TextStyle(
                                      color: Config.colorText1,
                                      fontSize: Config.textSizeSubTitle.sp),
                                ),
                                Text(
                                  '0/100',
                                  style: TextStyle(
                                      color: Config.colorText3,
                                      fontSize: Config.textSizeSubTitle.sp),
                                ),
                              ],
                            ),
                            SizedBox(
                              height: 35.w,
                            ),
                            Container(
                              height: 220.w,
                              width: double.infinity,
                              margin:
                              EdgeInsets.only(top: 0.w, bottom: 15.w, left: 0.w, right: 0.w),
                              padding: EdgeInsets.symmetric(horizontal: 22.w, vertical: 18.w),
                              decoration: BoxDecoration(
                                  border: Border.all(
                                      color: Config.colorMain.withOpacity(0.5), width: 1.5.w),
                                  borderRadius: BorderRadius.circular(22.w),
                                  color: Config.colorMain.withOpacity(0.0)),
                              alignment: Alignment.topLeft,
                              child: TextField(
                                keyboardType: TextInputType.text,
                                textAlign: TextAlign.left,
                                maxLength: 100,
                                maxLines: 8,
                                minLines: 1,
                                autofocus: false,
                                focusNode: _textFieldFocusNode,
                                cursorColor: Config.colorMain,
                                onChanged: (value) {},
                                onTap: () {},
                                enabled: true,
                                style: TextStyle(
                                    fontSize: Config.textSizeContent.sp, color: Config.colorText1),
                                decoration: InputDecoration(
                                  isDense: true,
                                  // 紧凑模式
                                  hintText: "请输入你要记录得内容",
                                  counterText: '',
                                  hintStyle: TextStyle(
                                      fontSize: Config.textSizeContent.sp,
                                      color: Config.colorText3),
                                  border: InputBorder.none,
                                  filled: false,
                                  prefixIcon: null,
                                  contentPadding:
                                  EdgeInsets.symmetric(vertical: 0.w, horizontal: 0.w),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      //多图选择
                      AddRecordImageWidget(),
                    ]),
              ),
            ],
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Container(
              color: Config.colorBg,
              padding: EdgeInsets.only(left: 55.w, right: 55.w, bottom: 55.w, top: 40.w),
              child: CommonWidget.commonButton("保存", () {}, width: double.infinity, radius: 50.w),
            ),
          ),
        ],
      ),
    );
  }

  menuItem(String title, Function() onTap, {String? subTitle}) {
    return InkWell(
      onTap: onTap,
      child: SizedBox(
        height: 114.w,
        child: Row(
          children: [
            Text(
              title,
              style: TextStyle(color: Config.colorText1, fontSize: Config.textSizeContent.sp),
            ),
            Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Visibility(
                    visible: subTitle != null,
                    child: Text(
                      subTitle ?? "",
                      style:
                      TextStyle(color: Config.colorText3, fontSize: Config.textSizeContent.sp),
                    ),
                  ),
                  SizedBox(width: 10.w),
                  Icon(
                    Icons.arrow_forward_ios_rounded,
                    color: Config.colorText3.withOpacity(0.7),
                    size: 32.w,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  wrapItem(int index) {
    return Obx(() => GestureDetector(
      onTap: () {
        logic.currentEmoji.value = index;
      },
      child: Column(
        children: [
          Container(
            width: 100.w,
            height: 100.w,
            decoration: BoxDecoration(
                color: index == logic.currentEmoji.value
                    ? Config.colorMain.withOpacity(0.4)
                    : Config.colorDivider.withOpacity(0.4),
                borderRadius: BorderRadius.circular(50.w)),
            child: Icon(
              logic.emojiList[index]['icon'],
              size: 68.w,
              color: index == logic.currentEmoji.value ? Config.colorText1 : Config.colorText3,
            ),
          ),
          SizedBox(
            height: 6.w,
          ),
          Container(
            width: 100.w,
            height: 30.w,
            alignment: Alignment.center,
            child: Text(logic.emojiList[index]['name'],
                style: TextStyle(
                    color: index == logic.currentEmoji.value
                        ? Config.colorText1
                        : Config.colorText2,
                    fontSize: Config.textSizeInfo.sp)),
          )
        ],
      ),
    ));
  }
}
